<template>
  <div>
    <tabs
      :tabs="tabsData"
      :isFixed="scrollTop >= 0"
      :tabIndex="tabIndex"
      :selectedColor="DIYTHEME?.host_bg"
      @change="changeTab"
      :bold="true"
      itemWidth="20%"
    ></tabs>
    <div class="body fade-show" v-if="!initLoading">
      <div :class="scrollTop >= 0 ? 'order-list' : ''" v-if="!initLoading">
        <template v-if="orderList.length">
          <temlpate v-for="(item, index) in orderList" :key="index">
            <div class="order-item" @click.stop="_toDetail(item.id)">
              <!-- 有效期 -->
              <div class="order-invalid-box" v-if="item.invalid_time > 0">
                <div>订单在</div>
                <countdown
                  :time="item.invalid_time"
                  bcolor="transparent"
                  :isColon="false"
                  :hours="false"
                  :colonSize="22"
                  :size="22"
                  color="#ff3535"
                  colonColor="#ff3535"
                ></countdown>
                <div>后失效</div>
              </div>

              <!-- 订单号 -->
              <div class="order-item-top">
                <div class="order-no">
                  <div class="text-grey">订单号:</div>
                  <div class="text-blue ml5">{{ item.order_no }}</div>
                </div>
                <div
                  :class="
                    item.order_status.value == 2 ? 'text-red' : 'text-grey'
                  "
                >
                  {{ item.status_text }}
                </div>
              </div>

              <!-- 商品 -->
              <template v-for="(items, indexs) in item.goods" :key="indexs">
                <div class="cell-item">
                  <div class="goods-item">
                    <image
                      :src="items.goods_image"
                      class="goods-image"
                      mode="aspectFill"
                      @click="_onGoods(items.goods_id)"
                    ></image>
                    <div class="goods-center">
                      <div class="goods-name" @click="_onGoods(items.goods_id)">
                        {{ items.goods_name }}
                      </div>
                      <div class="fz-small text-grey mt5">
                        规格:{{ items.sku_attr_text }}
                      </div>

                      <!-- 普通订单 -->
                      <template v-if="item.order_source.value == 'master'">
                        <div class="flex between mt5 fz-small">
                          <money :value="items.price"></money>
                          <div>x{{ items.total_num }}</div>
                        </div>
                      </template>
                    </div>
                  </div>
                </div>
              </template>
              <div class="cell-item text-right">
                共{{ item.total_num }}件商品
              </div>
              <template v-if="item.delivery_type.value == 'express'">
                <div class="cell-item flex end mt10 fz-small">
                  <div>运费:</div>
                  <div class="text-red" v-if="item.express_free">包邮</div>
                  <money v-else :value="item.express_price"></money>
                </div>
              </template>
              <div class="cell-item mt10">
                <div class="flex end">
                  <div>{{ item.pay_status.value ? "实付" : "合计" }}：</div>
                  <money
                    :value="
                      item.pay_status.value
                        ? item.pay_price
                        : item.order_total_price
                    "
                  ></money>
                </div>
              </div>
              <div
                class="cell-item mt10"
                v-if="item.update_price.value != '0.00'"
              >
                <div class="flex end">
                  <div>改价：</div>
                  <div class="text-red">
                    {{ item.update_price.symbol }}
                  </div>
                  <money :value="item.update_price.value"></money>
                </div>
              </div>

              <div class="order-btn mt10">
                <template
                  v-if="item.order_status.value != 3 && item.order_status.value"
                >
                  <!-- 未支付取消订单 -->
                  <template v-if="!item.pay_status.value">
                    <hover>
                      <div @click.stop="_cancelOrder(item.id)" class="btn">
                        取消
                      </div>
                    </hover>
                  </template>

                  <!-- 已支付取消订单 -->
                  <template v-if="item.order_status.value != 4">
                    <template
                      v-if="
                        item.pay_status.value &&
                        !item.delivery_status.value &&
                        item.order_status.value != 1
                      "
                    >
                      <hover>
                        <div class="btn" @click.stop="_cancelOrder(item.id)">
                          申请取消
                        </div>
                      </hover>
                    </template>

                    <!-- 订单核销码 -->
                    <hover
                      v-if="
                        item.pay_status.newValue &&
                        item.delivery_type.value == 'slef_mention' &&
                        item.delivery_time.value == 0
                      "
                    >
                      <div class="btn">
                        <text>取货</text>
                      </div>
                    </hover>
                  </template>
                  <template v-else>
                    <div class="text-red">取消申请中</div>
                  </template>

                  <!-- 查看物流 -->
                  <template
                    v-if="
                      item.pay_status.value &&
                      item.delivery_status.value &&
                      item.delivery_type.value == 'express' &&
                      !item.receipt_status.value
                    "
                  >
                    <hover>
                      <div @click.stop="_toExpress(item.id)" class="btn">
                        查看物流
                      </div>
                    </hover>
                  </template>

                  <!-- 订单付款 -->
                  <template v-if="!item.pay_status.value">
                    <hover>
                      <div
                        @click.stop="
                          _onPay({
                            id: item.id,
                            index: index,
                          })
                        "
                        class="btn"
                      >
                        付款
                      </div>
                    </hover>
                  </template>

                  <!-- 确认收货 -->
                  <template
                    v-if="
                      item.pay_status.value &&
                      item.delivery_type.value == 'express' &&
                      item.delivery_status.value &&
                      !item.receipt_status.value
                    "
                  >
                    <div>
                      <hover>
                        <div @click.stop="_onReceipt(item.id)" class="btn">
                          确认收货
                        </div>
                      </hover>
                    </div>
                  </template>

                  <!-- 订单评价 -->
                  <template
                    v-if="item.order_status.value == 1 && !item.comment_status"
                  >
                    <div>
                      <hover>
                        <div
                          @click.stop="_onComment(item.id)"
                          class="comment-btn btn"
                        >
                          评价
                        </div>
                      </hover>
                    </div>
                  </template>
                </template>
                <hover>
                  <div @click.stop="_toDetail(item.id)" class="btn">
                    查看详细
                  </div>
                </hover>
              </div>
            </div>
          </temlpate>
          <loadmore
            :visible="listPage.pullUpOn && listPage.loadmore"
          ></loadmore>
          <nomore :visible="!listPage.pullUpOn"></nomore>
        </template>
        <template v-else>
          <empty text="暂无相关订单" img="2"></empty>
        </template>
      </div>
    </div>
    <init-load v-if="initLoading"></init-load>
    <toTop @change="scrollToTop()" ref="toTopRef"></toTop>
    <payModal ref="payModalRef" @toPay="_toPay"></payModal>
  </div>
</template>
<script setup lang="ts">
import {
  onLoad,
  onPageScroll,
  onPullDownRefresh,
  onReachBottom,
  onShow,
} from "@dcloudio/uni-app";
import { ref, getCurrentInstance, onMounted, nextTick } from "vue";
import { storeToRefs } from "pinia";
import { useConfig } from "@/store";
import { getUserOrderList } from "@/api/user";
import { listPageType, Result, ResultError } from "@/types";
import toTop from "@/components/ui/to-top/index.vue";
import loadmore from "@/components/ui/more/loadmore.vue";
import nomore from "@/components/ui/more/nomore.vue";
import payModal from "@/components/pay-modal/index.vue";
import orderCommon from "./common";

const { DIYTHEME } = storeToRefs(useConfig());

const {
  proxy,
  proxy: { $utils },
} = getCurrentInstance() as any;

const initLoading = ref<boolean>(true);

const tabsData = ref<
  Array<{
    name: string;
    type: string;
  }>
>([
  {
    name: "全部",
    type: "all",
  },
  {
    name: "待付款",
    type: "payment",
  },
  {
    name: "待发货/取货",
    type: "delivery",
  },
  {
    name: "待收货",
    type: "received",
  },
  {
    name: "待评价",
    type: "comment",
  },
]);

const tabIndex = ref<number>(0);

const scrollTop = ref<number>(0);

const changeTab = (res: any) => {
  tabIndex.value = res.index;
  listPage.value.page = 1;
  toInit();
};

const orderList = ref<any>([]);

const listPage = ref<listPageType>({
  page: 1,
  last: 1,
  pullUpOn: true,
  loadmore: true,
});

const toInit = () => {
  var obj: any = {};
  obj.page = listPage.value.page;
  obj.dataType = tabsData.value[tabIndex.value].type;
  getUserOrderList(obj)
    .then((res: Result) => {
      orderList.value =
        listPage.value.page == 1
          ? res.data.list.data
          : orderList.value.concat(res.data.list.data);
      listPage.value.last = res.data.list.last_page;
      listPage.value.pullUpOn =
        res.data.list.last_page <= 1 && listPage.value.page == 1 ? false : true;
      initLoading.value = false;
    })
    .catch((err: ResultError) => {
      $utils.errorMsg(err);
    });
};

onLoad((options: any) => {
  if (options.status) {
    tabsData.value.forEach((item: any, index: number) => {
      if (item.type == options.status) {
        tabIndex.value = index;
      }
    });
  }
});

onShow(() => {
  listPage.value.page = 1;
  nextTick(() => {
    toInit();
  });
});

onReachBottom(() => {
  listPage.value.loadmore = true;
  if (listPage.value.page == listPage.value.last) {
    listPage.value.pullUpOn = false;
    listPage.value.loadmore = false;
  } else {
    listPage.value.page++;
    toInit();
  }
});

onPullDownRefresh(() => {
  listPage.value.page = 1;
  toInit();
});

//页面滚动执行方式
onPageScroll((e) => {
  proxy?.$refs["toTopRef"]?.scroll(e);
});

const scrollToTop = () => {
  uni.pageScrollTo({
    duration: 200,
    scrollTop: 0,
  });
};

const payModalRef = ref<HTMLElement>();

const _toDetail = (id: number) => {
  $utils.routeRedirectTo("/otherpages/user/order/detail", { order_id: id });
};

const {
  _cancelOrder,
  _toExpress,
  _onReceipt,
  _onComment,
  _onPay,
  _toPay,
  _onGoods,
} = orderCommon(toInit);
</script>
<style>
page {
  background: var(--base-page);
}
</style>

<style scoped>
.order-list {
  margin-top: 100rpx;
  margin-bottom: 100rpx;
}

.order-item {
  border-radius: var(--base-radius-default);
  width: calc(100% - 40rpx);
  margin: 20rpx 20rpx 0;
  overflow: hidden;
  background: #fff;
}
.order-item-top {
  height: 60rpx;
  line-height: 30rpx;
  padding: 10rpx 20rpx;
  display: flex;
  justify-content: space-between;
  border-bottom: 1rpx solid #f9f9f9;
  align-items: center;
}
.order-no {
  display: flex;
  font-size: var(--base-size-small);
}

.goods-item {
  width: 100%;
  padding: 30rpx 20rpx;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
}

.goods-image {
  width: 160rpx;
  height: 160rpx;
  display: block;
  flex-shrink: 0;
  border-radius: var(--base-radius-small);
}

.goods-center {
  flex: 1;
  padding: 0 15rpx 20rpx;
  box-sizing: border-box;
}
.goods-name {
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 32rpx;
  font-size: var(--base-size-default);
}

.cell-item {
  line-height: 35rpx;
  padding: 0 20rpx;
}

.order-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background: #fff;
  padding: 10rpx 20rpx 40rpx;
  box-sizing: border-box;
  font-size: var(--base-size-small);
}

.order-btn .btn {
  height: 50rpx;
  line-height: 50rpx;
  border-radius: var(--base-radius-small);
  font-size: var(--base-size-small);
  padding: 0 20rpx;
  margin-left: 20rpx;
  white-space: nowrap;
  background: #f0f0f0;
}

.order-invalid-box {
  display: flex;
  justify-content: center;
  padding: 30rpx 0;
  align-items: center;
  text-align: center;
  color: var(--base-red);
  font-size: var(--base-size-small-x);
  border-bottom: 1rpx solid #f9f9f9;
}
</style>